<template>
	<view class="content columnbox jus wdh-100" :style="{'minHeight':windowHeight+'px'}">
		<view class="colorbox"></view>
		<view class="info-box columnbox">
			<view class="wdh-100" :style="{'height':menutop+'px'}"></view>
			<view :style="{'height':menuheight+'px'}" class="rowbox jus wdh-100">
				<image src="http://mkxd-app.oss-cn-beijing.aliyuncs.com/2025/01/13/a8bd4a9f85d5438e90636f3bf1643016.png" mode="widthFix" class="logo"></image>
			</view>
			<view class="rowbox wdh-100 spb" style="margin-top: 36rpx;">
				<!-- #ifdef MP -->
				<picker mode="region" @change="cityChange">
					<view class="rowbox">
						<image src="/static/img/location.png" mode="widthFix" class="location-icon"></image>
						<view class="location-title">{{city}}</view>
					</view>
				</picker>
				<!-- #endif -->
				<!-- #ifdef H5 -->
				<view class="rowbox">
					<image src="/static/img/location.png" mode="widthFix" class="location-icon"></image>
					<view class="location-title textovflow">石家庄</view>
				</view>
				<!-- #endif -->
				<view class="rowbox search-box jus" @click="searchInfo">
					<image src="/static/img/index-search.png" mode="widthFix" class="search-icon"></image>
					请输入门店名称
				</view>
				<view class="rowbox message-box">
					<view></view>
					<image src="/static/img/message.png" mode="widthFix" class="message-icon" @click="tomessage"></image>
				</view>
			</view>
			<!-- 未添加车辆 -->
			<view class="columnbox wdh-100" v-if="!carflag">
				<image v-if="isLogin" @click="addCar" class="card-box"
					src="http://mkxd-app.oss-cn-beijing.aliyuncs.com/172e5ef6f4b9497e9c645a52ffb79693.png"
					mode="widthFix">
				</image>
				<image v-else @click="toLog" class="card-box" src="http://mkxd-app.oss-cn-beijing.aliyuncs.com/49c18a9834ef429ca03ec94b9fc86fc2.png" mode="widthFix">
				</image>
				<view class="card-bg-color"></view>
				<!-- 2025/01/08/8db1701f2eaa4645ab1f044b2567ee11.png -->
				<image src="http://mkxd-app.oss-cn-beijing.aliyuncs.com/2025/01/08/8db1701f2eaa4645ab1f044b2567ee11.png" mode="widthFix" class="card-bg"></image>
				<!-- <image src="/static/img/card-bottom.png" mode="widthFix" class="card-bg"></image> -->
				<view class="rowbox md-box spb">
					<!-- 扫码开门 -->
					<view class="rowbox smkm-box spb" @click="scanCode">
						<view class="columnbox als">
							<view class="md-title">扫码开门</view>
							<view class="md-desc">无牌车/电动车扫码洗车</view>
						</view>
						<image src="/static/img/smkm.png" mode="widthFix" class="md-icon"></image>
					</view>
					<!-- 洗车券 -->
					<view class="rowbox xcq-box spb" @click="showCoupon">
						<view class="columnbox als">
							<view class="md-title">洗车券</view>
							<view class="md-desc">一券通用，套餐优惠</view>
						</view>
						<image src="/static/img/xcq.png" mode="widthFix" class="md-icon"></image>
					</view>
				</view>
			</view>
			<!-- 已添加车辆 -->
			<view class="columnbox wdh-100" v-if="carflag">
				<view class="columnbox wdh-100" style="position: relative;">
					<image @click="showWallet" class="card-box" src="http://mkxd-app.oss-cn-beijing.aliyuncs.com/90e8041c2d21437eadedca21edac1d29.png" mode="widthFix">
					</image>
					<view class="wallet-num">
						<text style="font-size: 24rpx;margin-right: 10rpx;">¥</text>
						{{userDetail.cash}}
					</view>
					<view class='recharge-btn rowbox' @click.stop="toRecharge">去充值</view>
				</view>
				<view class="card-bg-color"></view>
				<!-- 2025/01/08/8db1701f2eaa4645ab1f044b2567ee11.png -->
				<image src="http://mkxd-app.oss-cn-beijing.aliyuncs.com/2025/01/08/8db1701f2eaa4645ab1f044b2567ee11.png" mode="widthFix" class="card-bg"></image>
				<!-- <image src="/static/img/card-bottom.png" mode="widthFix" class="card-bg"></image> -->
				<view class="columnbox wdh-100 md-box">
					<view class="rowbox wdh-100 spb">
						<!-- 车辆管理 -->
						<view class="rowbox carmanage-box spb" @click="carManage">
							<view class="columnbox als">
								<view class="md-title">{{userDetail.carnum}}辆</view>
								<view class="md-desc">车库</view>
							</view>
							<image src="/static/img/index-car.png" mode="widthFix" class="md-icon"></image>
							<view class="carmanage-btn rowbox">管理</view>
						</view>
						<!-- 洗车券 -->
						<view class="rowbox xcq-box-my spb" @click="myCoupon">
							<view class="columnbox als">
								<view class="md-title">{{userDetail.couponsNum}}张</view>
								<view class="md-desc">洗车券</view>
							</view>
							<image src="/static/img/index-xcq.png" mode="widthFix" class="md-icon"></image>
							<view class="xcq-btn rowbox" @click.stop="showCoupon">获取</view>
						</view>
					</view>
					<view class="rowbox wdh-100 spb" style="margin: 20rpx 0;">
						<!-- 扫码开门 -->
						<view class="rowbox smkm-box spb" @click="scanCode">
							<view class="columnbox als">
								<view class="md-title">扫码开门</view>
								<view class="md-desc">无牌车/电动车扫码洗车</view>
							</view>
							<image src="/static/img/smkm.png" mode="widthFix" class="md-icon"></image>
						</view>
						<!-- 洗车站 -->
						<view v-if="stationList.length>0" class="rowbox xcz-box spb"
							@click="showDetail(stationList[0].stationId)" style="position: relative;">
							<view class="columnbox als">
								<view class="md-title textovflow" style="width: 250rpx">
									{{stationList[0].name}}
								</view>
								<view class="md-desc">
									<view class="store-type" v-if="stationList[0].stationType==0">旗舰站</view>
									<view class="store-type" v-else-if="stationList[0].stationType==1">标准站</view>
									<view class="store-type" v-else-if="stationList[0].stationType==2">自助站</view>
									<view class="store-type" v-else-if="stationList[0].stationType==3">自动站</view>
								</view>
							</view>
							<view class="xcz-btn rowbox">前往</view>
						</view>
					</view>
				</view>
			</view>
			<!-- <button  @click="test">测试</button> -->
			<!-- 订单 -->
			<swiper class="swiper-box" v-if="orderlist.length>0">
				<swiper-item @click="showOrderDetail(item)" v-for="(item,index) in orderlist" :key='index'>
					<view class="columnbox wdh-100 one-order">
						<view class="wdh-100 order-title rowbox jus">
							<image src="/static/img/order.png" mode="widthFix" class="order-icon"></image>
							我的订单<text>{{item.stationName}}</text>
						</view>
						<view class="rowbox wdh-100 order-info spb">
							<view class="rowbox order-station">
								<view>{{item.doorName}}</view>
								<view>时长：{{item.washDuration}}分钟</view>
							</view>
							<view class="rowbox order-btn">结束订单</view>
						</view>
					</view>
				</swiper-item>
				<!-- <swiper-item>
					<view class="columnbox wdh-100 one-order">
						<view class="wdh-100 order-title rowbox jus">
							<image src="/static/img/xiaoxi.png" mode="widthFix" class="order-icon"></image>
							您有新的未读消息
						</view>
						<view class="rowbox wdh-100 order-info spb">
							<view>你的朋友转赠了一张洗车券</view>
							<view class="rowbox order-btn">查看</view>
						</view>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="columnbox wdh-100 one-order">
						<view class="wdh-100 order-title rowbox jus">
							<image src="/static/img/yuyue.png" mode="widthFix" class="order-icon"></image>
							您的预约订单
						</view>
						<view class="rowbox wdh-100 order-info spb">
							<view class="rowbox">
								<view>您预约的</view>
								<view style="color: #1E72CA;">28日12:30</view>
								<view>的洗车服务</view>
							</view>
							<view class="rowbox order-btn">前往</view>
						</view>
					</view>
				</swiper-item> -->
			</swiper>
			<!-- 模块 -->
			<view class="m-box wdh-100 rowbox spb">
				<view class="columnbox one-m" @click="showList('0')">
					<image src="/static/img/zdxc.png" mode="widthFix"></image>
					自动洗车
				</view>
				<view class="columnbox one-m" @click="showList('1')">
					<image src="/static/img/zzxc.png" mode="widthFix"></image>
					自助洗车
				</view>
				<view class="columnbox one-m" @click="showList('2')">
					<image src="/static/img/rgyy.png" mode="widthFix"></image>
					人工预约
				</view>
				<view class="columnbox one-m" @click="showVerification">
					<image src="/static/img/tghx.png" mode="widthFix"></image>
					团购核销
				</view>
			</view>
			<!-- <image @click="showRecharge" src="/static/img/vipbanner.png" mode="widthFix" class="vip-banner"> -->
			<image @click="showRecharge" src="http://mkxd-app.oss-cn-beijing.aliyuncs.com/2025/02/08/98ac22b2f1e04df4b48f9e5174a44514.png" mode="widthFix" class="vip-banner">
			</image>
			<!-- 附近 -->
			<view class="rowbox spb n-box">
				<view class="n-title">附近</view>
				<view class="rowbox">
					<view @click="changeType(item)" v-for="(item,index) in typeList" :key='index'
						class="rowbox one-type" :class="{'sel-type':item.value==curType}">
						{{item.name}}
					</view>
				</view>
			</view>
			<view @click="showDetail(item.stationId)" class="columnbox wdh-100 s-box jus"
				v-for="(item,index) in stationList" :key='index'>
				<view class="rowbox wdh-100 spb als">
					<image mode="aspectFill" class="s-img" :src="item.img" v-if="item.img.length==1">
						<image mode="aspectFill" class="s-img" :src="infs" v-if="item.img.length>1" v-for="(infs,isj) in item.img.split(',')" :key="isj">
					</image>
					<view class="columnbox wdh-100 spb s-info">
						<view class="rowbox wdh-100 jus">
							<view class="s-name textovflow">{{item.name}}</view>
							<view class="rowbox  type-box">
								<view class="rowbox s-qj" v-if="item.stationType==0">旗舰站</view>
								<view class="rowbox s-jm" v-else-if="item.stationType==1">标准站</view>
								<view class="rowbox s-zz" v-else-if="item.stationType==2">自助站</view>
								<view class="rowbox s-zd" v-else-if="item.stationType==3">自动站</view>
							</view>
						</view>
						<view class="rowbox wdh-100 spb" style="margin-top: 24rpx;">
							<view class="s-address textovflow" style="width: 240rpx;">{{item.address}}</view>
							<view class="s-address" style="margin-left: 20rpx;">
								{{item.distance>1000?item.distance/1000+'KM':(item.distance+'M')}}
							</view>
							<!-- <view class="rowbox location-box" @click.stop="showMap(item)">
								<image src="/static/img/s-location.png"></image>
								导航
							</view> -->
						</view>
					</view>
				</view>
				<view class="rowbox spb wdh-100 s-door-info">
					<view class="rowbox jus">
						<view class="rowbox s-zd-status" v-if="item.doors[stationType.zd].split('/')[0]>0">
							<view class="s-zd-status-title rowbox">自动</view>
							<view class="s-zd-status-detail">闲{{item.doors[stationType.zd].split('/')[0]}}
								<text>/{{item.doors[stationType.zd].split('/')[1]}}</text>
							</view>
						</view>
						<view class="rowbox s-zd-status zz-status" v-if="item.doors[stationType.zz].split('/')[0]>0">
							<view class="s-zd-status-title rowbox" style="background: #00DCA9;">自助</view>
							<view class="s-zd-status-detail" style="color: #00DCA9;">
								闲{{item.doors[stationType.zz].split('/')[0]}}
								<text>/{{item.doors[stationType.zz].split('/')[1]}}</text>
							</view>
						</view>
						<view class="rowbox s-zd-status" style="background: #fdf6e3;"
							v-if="item.doors[stationType.rg].split('/')[0]>0">
							<view class="s-zd-status-title rowbox" style="background: #E99D42;">人工</view>
							<view class="s-zd-status-detail" style="color:#EAB300;">
								闲{{item.doors[stationType.rg].split('/')[0]}}
								<text>/{{item.doors[stationType.rg].split('/')[1]}}</text>
							</view>
						</view>
					</view>
					<view class="rowbox location-box" @click.stop="showMap(item)">
						<image src="/static/img/s-location.png"></image>
						导航
					</view>
				</view>
			</view>
		</view>
		<tabBar :value='0'></tabBar>
	</view>
</template>

<script>
	var TxMap = require("../../utils/qqmap-wx-jssdk.js")
	var TxMapSdk = new TxMap({
		key: 'LNBBZ-UQ66G-QFQQ4-Q64MC-JBA7K-G7FEQ'
	})
	import tabBar from '@/components/tabbar/tabbar.vue'
	export default {
		components: {
			tabBar
		},
		data() {
			return {
				windowHeight: 0,
				menutop: 20,
				menuheight: 20,
				typeList: [{
						name: '全部',
						value: -1
					},
					{
						name: '自动站',
						value: 3
					},
					{
						name: '自助站',
						value: 2
					},
					{
						name: '标准站',
						value: 1
					},
					{
						name: '旗舰站',
						value: 0
					}
				],
				curType: -1,
				carflag: false, //是否添加车辆
				pageNum: 1,
				lng: 114.544842,
				lat: 38.024091,
				stationList: [],
				moreflag: false,
				city: '石家庄',
				userDetail: {
					carnum: 0,
					cash: "0.00",
					couponsNum: 0,
					integral: 0
				},
				orderlist: [],
				stationType: {
					zd: 0,
					zz: 1,
					rg: 2
				}
			}
		},
		computed: {
			// 通过计算属性将 state 中的 count 映射到组件
			isLogin() {
				return this.$store.state.isLogin;
			},
			userInfo() {
				return this.$store.state.user;
			},
		},
		watch: {
			isLogin(newObj, oldObj) {
				
				if (newObj) {
					this.getUserInfo()
					this.getOrder()
					// this.pageNum = 1
					// this.stationList = []
					// this.getStationList()
				} else {
					this.userDetail = {
						carnum: 0,
						cash: "0.00",
						couponsNum: 0,
						integral: 0
					}
					this.orderlist = []
				}
			}
		},
		async onLoad(options) {
			
			
			console.log(options)
			if (options.q) {
			    //1.将二维码链接解码
			    let codeStr = decodeURIComponent(options.q)
				// console.log('解码后的',codeStr)
			    //2.取出对应参数
			    const codeId = codeStr.match(/[?&]extendCode=(\d+)/)
			  let   devId = codeId ? codeId[1] : ''
				console.log(devId,'测试传参扫码');
				// 请求地址
				this.$req.get(`/xcx/userExtendBind/bind/${devId}`).then(res=>{
					// console.log(res,'--------------------------')
					this.$modal.msg(res.data.msg)
			})		
			  }
			await this.$onLaunched;
			uni.hideTabBar()
			uni.getSystemInfo({
				success: (res) => {
					this.windowHeight = res.windowHeight
				}
			})
			if (uni.getStorageSync('city')) {
				this.city = uni.getStorageSync('city')
			} else {
				uni.setStorageSync('cityId', 130100)
				uni.setStorageSync('city', '石家庄')
				this.city = '石家庄'
			}
			// #ifdef MP
			this.getCity()
			// #endif
			// #ifdef H5
			this.getStationList()
			// #endif
			// #ifdef MP-WEIXIN
			this.menutop = wx.getMenuButtonBoundingClientRect().top
			this.menuheight = wx.getMenuButtonBoundingClientRect().height
			// #endif
			// #ifdef MP-ALIPAY
			this.menutop = my.getMenuButtonBoundingClientRect().top
			this.menuheight = my.getMenuButtonBoundingClientRect().height
			// #endif
		},
		onShow() {
			if (this.isLogin) {
				this.getUserInfo()
				this.getOrder()
			}
		},
		onReachBottom() {
			if (this.moreflag) {
				this.pageNum++
				this.getStationList()
			}
		},
		methods: {
			// 跳转消息界面
			tomessage(){
				uni.navigateTo({
					url: '/packageA/messages/messages'
				})
			},
			showWallet() {
				if (this.isLogin) {
					uni.navigateTo({
						url: '/pages/wallet/wallet'
					})
				} else {
					this.$noLog()
				}
			},
			showMap(v) {
				uni.openLocation({
					latitude: Number(v.lat),
					longitude: Number(v.lng),
					name: v.name
				})
			},
			showRecharge() {
				uni.navigateTo({
					url: '/packageA/vip/index'
				})
			},
			scanCode() {
				if(!uni.getStorageSync('isLogin')){
					uni.navigateTo({
						url:'/pages/log/log'
					})
					return
				}
				uni.scanCode({
					success: (res) => {
						if (res.path.indexOf('door_id=') < 0) {
							uni.showModal({
								title: '二维码错误'
							})
						} else {
							var urlParam = res.path.split("door_id=")[1]
							uni.navigateTo({
								url: '/packageA/scanOpenDoor/scanOpenDoor?doorId=' + urlParam
							})
						}
					}
				})
			},
			// 团购核销
			showVerification() {
				if (this.isLogin) {
					uni.navigateTo({
						url: '/packageA/verification/verification'
					})
				} else {
					this.$noLog()
				}
			},
			myCoupon() {
				if (this.isLogin) {
					uni.navigateTo({
						url: '/pages/coupon/myCoupon'
					})
				} else {
					this.$noLog()
				}
			},
			// 购买洗车券
			showCoupon() {
				if (this.isLogin) {
					uni.navigateTo({
						url: '/pages/coupon/buyCoupon'
					})
				} else {
					this.$noLog()
				}
			},
			getUserInfo() {
				this.$req.get('/xcx/home').then(res => {
					if (res.data.data) {
						this.userDetail = {
							carnum: res.data.data.carsNum,
							cash: res.data.data.cash,
							couponsNum: res.data.data.couponsNum,
							integral: 0
						}
						this.carflag = res.data.data.carsNum > 0 ? true : false
					}
				})
			},
			showOrderDetail(v) {
				uni.navigateTo({
					url: '/pages/order/detail?id=' + v.orderId
				})
			},
			getOrder() {
				this.$req.get('/xcx/washOrder/current', {
					orderStatus: 0,
					pageNum: 1,
					pageSize: 1
				}).then(res => {
					console.log(res)
					if (res.data.code==200) {
						let x = [];
						if(uni.$u.test.isEmpty(res.data.data)){
							this.orderlist = []
						}else{
							x.push(res.data.data)
							this.orderlist = x;
							console.log(this.orderlist)
						}
					}
				})
			},
			toRecharge() {
				uni.navigateTo({
					url: '/pages/coupon/buyCoupon'
				})
			},
			// 获取车辆
			getCar() {
				this.$req.get('/xcx/userCars/list', {
					pageNum: 1
				}).then(res => {
					if (res.data) {
						this.userDetail.carnum = res.data.total
						this.carflag = res.data.total > 0 ? true : false
					}
				})
			},
			//获取钱包
			getWallet() {
				this.$req.get('/xcx/userWallet').then(res => {
					if (res.data.data) {
						this.userDetail = Object.assign(this.userDetail, res.data.data)
					}
				})
			},
			getSetting() {
				let that = this;
				uni.getSetting({
					success: res => {
						var authList = res.authSetting;
						console.log(authList);
						if (!authList['scope.userLocation']) {
							console.log("未得到位置权限");
							that.openSetting();
						} else {
							this.getStationList()
						}
					},
				});
			},
			openSetting() {
				let that = this;
				wx.authorize({
					scope: 'scope.userLocation',
					success() {},
					fail: err => {
						wx.showModal({
							title: '提示',
							content: '检测到您没打开获取信息功能权限,是否去设置打开？',
							success: res => {
								if (res.confirm) {
									wx.openSetting({
										success: res => {
											this.setCity()
										}
									})
								} else {
									this.pageNum = 1
									this.stationList = []
									this.getStationList()
								}
							},
						})
					}
				})
			},
			setCity() {
				uni.getLocation({
					success: (res) => {
						this.lat = res.latitude
						this.lng = res.longitude
						TxMapSdk.reverseGeocoder({
							location: {
								latitude: res.latitude,
								longitude: res.longitude
							},
							success: res => {
								uni.setStorageSync('cityId', res.result.ad_info.city_code.split(res
									.result
									.ad_info.nation_code)[1])
								this.city = res.result.ad_info.city
								uni.setStorageSync('city', res.result.ad_info.city)
								this.pageNum = 1
								this.stationList = []
								this.getStationList()
							},
							fail: (err) => {
								this.pageNum = 1
								this.stationList = []
								this.getStationList()
							},
						})
					},
					fail: () => {
						this.pageNum = 1
						this.stationList = []
						this.getStationList()
					}
				})
			},
			getCity() {
				uni.showLoading({
					title: '加载中'
				})
				uni.getSetting({
					success: res => {
						var authList = res.authSetting;
						console.log(authList);
						if (authList['scope.userLocation']) {
							if (!authList['scope.userLocation']) {
								console.log("未得到位置权限");
							} else {
								uni.getLocation({
									success: (res) => {
										this.lat = res.latitude
										this.lng = res.longitude
										TxMapSdk.reverseGeocoder({
											location: {
												latitude: res.latitude,
												longitude: res.longitude
											},
											success: res => {
												uni.setStorageSync('cityId', res.result
													.ad_info.city_code.split(res
														.result
														.ad_info.nation_code)[1])
												this.city = res.result.ad_info.city
												uni.setStorageSync('city', res.result
													.ad_info.city)
												this.getStationList()
											},
											fail: (err) => {
												console.log('获取位置失败', err)
												this.getStationList()
											},
										})
									},
									fail: () => {
										this.getStationList()
										// this.getSetting()
									},
									complete: () => {
										uni.hideLoading()
									}
								})
							}
						} else {
							console.log("暂未授权");
							uni.getLocation({
								success: (res) => {
									this.lat = res.latitude
									this.lng = res.longitude
									TxMapSdk.reverseGeocoder({
										location: {
											latitude: res.latitude,
											longitude: res.longitude
										},
										success: res => {
											uni.setStorageSync('cityId', res.result
												.ad_info.city_code.split(res
													.result
													.ad_info.nation_code)[1])
											this.city = res.result.ad_info.city
											uni.setStorageSync('city', res.result
												.ad_info.city)
											this.getStationList()
										},
										fail: (err) => {
											console.log('获取位置失败', err)
											this.getStationList()
										},
									})
								},
								fail: () => {
									this.getStationList()
									// this.getSetting()
								},
								complete: () => {
									uni.hideLoading()
								}
							})
						}
					},
				});
			},
			cityChange(e) {
				this.city = e.detail.value[1]
				uni.setStorageSync('cityId', e.detail.code[1])
				uni.setStorageSync('city', e.detail.value[1])
				this.pageNum = 1
				this.stationList = []
				this.getStationList()
			},
			test() {
				uni.chooseImage({
					success: (res) => {
						this.$req.uploadImg(res.tempFilePaths[0])
					}
				})
			},
			//获取洗车站
			getStationList() {
				this.$req.get('/xcx/station/list/stationType', {
					cityId: uni.getStorageSync('cityId'),
					stationType: this.curType,
					pageSize: 20,
					pageNum: this.pageNum,
					lng: this.lng,
					lat: this.lat
				}).then(res => {
					res.data.rows.forEach(resp => {
						// console.log(resp,'----')
						// resp.img = JSON.parse(resp.listUrl)[0].url
						resp.img = resp.listUrl
					})
					this.stationList = this.stationList.concat(res.data.rows)
					this.moreflag = res.data.rows.length == 20 ? true : false
				})
			},
			// 添加车辆
			addCar() {
				uni.navigateTo({
					url: '/packageA/carManage/add'
				})
			},
			toLog() {
				this.$noLog()
			},
			carManage() {
				uni.navigateTo({
					url: '/packageA/carManage/list'
				})
			},
			changeType(v) {
				this.curType = v.value
				this.pageNum = 1
				this.stationList = []
				this.getStationList()
			},
			//搜索
			searchInfo() {
				uni.navigateTo({
					url: '/pages/index/search/search'
				})
			},
			//商家详情
			showDetail(id) {
				uni.navigateTo({
					url: '/pages/store/detail?id=' + id
				})
			},
			//附近洗车站
			showList(type) {
				uni.navigateTo({
					url: '/pages/store/nearList?type=' + type
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.colorbox {
		background: linear-gradient(180deg, rgba(30, 114, 202, 0.99) 0%, rgba(30, 114, 202, 0) 100%);
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 800rpx;
		z-index: 1;
	}

	.content {
		font-family: PingFang SC;
		background: linear-gradient(180deg, rgba(239, 239, 239, 0.38) 0%, rgba(239, 239, 239, 1) 100%);
	}


	.logo {
		width: 362rpx;
		height: 42rpx;
	}

	.location-icon {
		width: 36rpx;
		height: 40rpx;
	}

	.info-box {
		padding: 0 30rpx;
		width: 100%;
		position: relative;
		z-index: 2;
	}

	.location-title {
		color: #fff;
		font-size: 28rpx;
		font-weight: bold;
		margin-left: 10rpx;
		width: 120rpx;
		white-space: nowrap;
	}

	.search-box {
		width: 462rpx;
		height: 66rpx;
		background: #FFFFFF;
		border-radius: 40rpx;
		border: 2rpx solid #000000;
		font-size: 24rpx;
		color: #666666;
		padding: 0 22rpx;

		.search-icon {
			width: 37rpx;
			height: 37rpx;
			margin-right: 12rpx;
		}
	}

	.message-box {
		position: relative;
		width: 32rpx;
		height: 40rpx;

		.message-icon {
			width: 32rpx;
			height: 40rpx;
		}

		view {
			top: 0;
			right: 0;
			position: absolute;
			background: #F73F2E;
			width: 10rpx;
			height: 10rpx;
		}
	}

	.wallet-num {
		position: absolute;
		top: 128rpx;
		left: 70rpx;
		font-family: DINPro, DINPro;
		font-size: 40rpx;
		color: #F6CF86;
		font-weight: bold;
		z-index: 5;
	}

	.box-one {
		margin-top: 20rpx;
		padding: 20rpx 20rpx;
		background: #fff;
		border-radius: 20rpx;
		text-align: center;
		box-shadow: 0px 2rpx 6rpx 2rpx rgba(56, 148, 254, 0.2);

		.box-one-l {
			width: 332rpx;
		}

		.box-one-r {
			width: 320rpx;
		}


		.wallet-box {
			width: 100%;
			height: 300rpx;
			background: rgba(56, 148, 254, 0.09);
			border-radius: 15rpx;
			padding: 20rpx 20rpx;

			.wallet-title {
				image {
					width: 40rpx;
					height: 40rpx;
					margin-right: 20rpx;
				}

				color: rgba(30, 114, 202, 1);
				font-size: 24rpx;
			}



			.wallet-lq {
				text-align: left;
				color: rgba(30, 114, 202, 0.66);
				font-size: 24rpx;
				width: 100%;
				margin-top: 20rpx;
			}

			.r-btn {
				width: 160rpx;
				height: 60rpx;
				font-size: 28rpx;
				color: #fff;
				background: rgba(30, 114, 202, 1);
				border-radius: 100rpx;
			}
		}

		.scan-box {
			width: 100%;
			height: 140rpx;
			border-radius: 15rpx;
			padding: 20rpx 20rpx;
			background: rgba(217, 234, 252, 1);
			margin-top: 20rpx;

			.scan-title {
				font-weight: bold;
				font-size: 36rpx;
			}

			.scan-desc {
				color: rgba(154, 154, 154, 1);
				font-size: 24rpx;
				margin-top: 10rpx;
			}

			.scan-img {
				width: 60rpx;
				height: 60rpx;
			}
		}

		.car-box {
			background: rgba(233, 157, 66, 0.5);
			margin-top: 0;
			align-items: flex-end;

			.car-btn {
				background: #E99D42;
				color: #fff;
				font-size: 24rpx;
				width: 100rpx;
				height: 50rpx;
				border-radius: 100rpx;
			}
		}


		.coupon-box {
			margin-top: 20rpx;
			background: rgba(119, 40, 245, 0.09);

			.coupon-btn {
				background: #7728F5;
			}
		}

		.store-box {
			margin-top: 20rpx;
			background: rgba(228, 105, 130, 0.1);
			align-items: flex-start;

			.store-img {
				width: 60rpx;
				height: 60rpx;
				border-radius: 10rpx;
			}

			.store-info {
				width: calc(100% - 80rpx);
			}



			.store-btn {
				background: #E46982;
				color: #fff;
				font-size: 24rpx;
				width: 100rpx;
				height: 50rpx;
				border-radius: 100rpx;
			}
		}
	}

	.swiper-box {
		width: 690rpx;
		height: 182rpx;
		margin-top: 56rpx;

		.one-order {
			background: #FFFFFF;
			border-radius: 24rpx;
			width: 690rpx;
			height: 182rpx;
			padding: 24rpx;
			justify-content: flex-start;

			.order-icon {
				width: 26rpx;
				height: 32rpx;
				margin-right: 8rpx;
			}

			.order-title {
				font-weight: 600;
				font-size: 28rpx;
				color: #000000;

				text {
					font-size: 24rpx;
					font-weight: normal;
				}
			}

			.order-info {
				margin-top: 20rpx;

				.order-station {
					width: 436rpx;
					height: 74rpx;
					background: rgba(23, 105, 143, 0.1);
					border-radius: 12rpx;
					border: 2rpx solid #17698F;
					font-family: PingFang SC, PingFang SC;
					font-size: 24rpx;
					color: #000000;
					padding: 20rpx;
					justify-content: space-between
				}

				.order-btn {
					width: 176rpx;
					height: 74rpx;
					background: #17698F;
					border-radius: 12rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 600;
					font-size: 24rpx;
					color: #FFFFFF;
				}
			}
		}
	}

	.m-box {
		margin-top: 62rpx;
		width: 690rpx;

		.one-m {
			font-family: PingFang SC, PingFang SC;
			font-size: 24rpx;
			color: #000000;

			image {
				width: 96rpx;
				height: 96rpx;
				border-radius: 100rpx;
				margin-bottom: 8rpx;
			}
		}
	}

	.store-type {
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 16rpx;
		color: #56A7AD;
	}

	.vip-banner {
		margin-top: 36rpx;
		width: 690rpx;
		height: 200rpx;
	}

	.n-box {
		margin-top: 36rpx;
		margin-bottom: 20rpx;
		width: 690rpx;

		.n-title {
			font-family: PingFang SC, PingFang SC;
			font-weight: 600;
			font-size: 32rpx;
			color: #000000;
		}

		.one-type {
			height: 42rpx;
			background: #FFFFFF;
			border-radius: 8rpx;
			font-family: PingFang SC, PingFang SC;
			font-size: 24rpx;
			color: #72778A;
			padding: 0 8rpx;
			margin-left: 28rpx;
			min-width: 88rpx;
		}

		.sel-type {
			background: #126BC9;
			color: #fff;
		}
	}

	.s-box {
		padding: 24rpx;
		background: #fff;
		border-radius: 24rpx;
		margin-bottom: 20rpx;

		.s-img {
			width: 160rpx;
			height: 98rpx;
			border-radius: 12rpx;
			margin-right: 16rpx;
		}

		.s-info {
			width: 490rpx;
			position: relative;

			.s-name {
				font-family: PingFang SC, PingFang SC;
				font-weight: 600;
				font-size: 28rpx;
				color: #000000;
				width: 200rpx;
			}

			.type-box {
				position: absolute;
				top: -24rpx;
				right: -24rpx;
			}
		}

		.s-door-info {
			border-top: #F6F6F6 solid 1px;
			width: 100%;
			margin-top: 16rpx;
			padding-top: 16rpx;
		}

		.s-zz,
		.s-jm,
		.s-zd,
		.s-qj {
			background: #5233C9;
			color: #fff;
			margin-right: 24rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 600;
			font-size: 20rpx;
			color: #FFFFFF;
			padding: 4rpx 8rpx;
			border-radius: 0px 0px 8rpx 8rpx;
		}

		.s-jm {
			background: #56A7AD;
			color: #fff;
		}

		.s-zd {
			background: #EAB300;
		}

		.s-qj {
			background: #00DCA9;
		}

		.s-zd-status {
			background: #e2edf7;
			border-radius: 8rpx;
			margin-right: 16rpx;

			.s-zd-status-title {
				background: #126BC9;
				font-family: PingFang SC, PingFang SC;
				font-weight: 600;
				font-size: 20rpx;
				color: #FFFFFF;
				padding: 4rpx 8rpx;
				border-radius: 8rpx;
			}

			.s-zd-status-detail {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 20rpx;
				color: #126BC9;
				padding: 4rpx 8rpx;
			}
		}

		.zz-status {
			background: #dffaf5;
		}

		.s-address {
			font-family: PingFang SC, PingFang SC;
			font-size: 24rpx;
			color: #72778A;
		}

		.location-box {
			font-family: PingFang SC, PingFang SC;
			font-weight: 600;
			font-size: 24rpx;
			color: #126BC9;

			image {
				width: 28rpx;
				height: 28rpx;
				margin-right: 4rpx;
			}
		}
	}

	.add-car {
		background: rgba(56, 148, 254, 0.09);
		padding: 20rpx 20rpx;

		.add-car-title {
			font-size: 32rpx;

			text {
				color: #FB6727;
				margin-right: 20rpx;
			}
		}

		.add-car-desc {
			font-size: 28rpx;
			color: #6C6C6C;
			margin-top: 20rpx;
		}

		.add-car-btn {
			font-size: 28rpx;
			color: #fff;
			background: #FB6727;
			width: 170rpx;
			height: 70rpx;
			border-radius: 100rpx;
		}
	}

	.add-car-box {
		padding: 20rpx 20rpx;
		padding-top: 0;
	}

	.card-box {
		margin-top: 54rpx;
		width: 610rpx;
		height: 144rpx;
		position: relative;
		z-index: 4;
	}

	.card-bg-color {
		position: relative;
		z-index: 2;
		margin-top: -40rpx;
		width: 690rpx;
		height: 40rpx;
		background: #D9D9D9;
		border-radius: 100rpx;
	}

	.card-bg {
		width: 690rpx;
		height: 186rpx;
		margin-top: -25rpx;
	}

	.md-box {
		width: 690rpx;
		margin-top: -140rpx;
		padding: 0 24rpx;
		position: relative;
		z-index: 4;
		background: #fff;
		border-radius: 20rpx;

		.smkm-box,
		.xcq-box,
		.carmanage-box,
		.xcq-box-my,
		.xcz-box {
			width: 312rpx;
			height: 110rpx;
			background: #EEEBFA;
			border-radius: 16rpx;
			padding: 16rpx 20rpx;
		}

		.xcq-box {
			background: rgba(18, 107, 201, 0.1);
		}

		.xcq-box-my {
			background: rgba(246, 207, 134, 0.1);
		}

		.xcz-box {
			background: rgba(86, 167, 173, 0.1);
		}

		.carmanage-btn,
		.xcq-btn,
		.xcz-btn {
			width: 72rpx;
			height: 36rpx;
			background: #126BC9;
			border-radius: 33rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 600;
			font-size: 20rpx;
			color: #FFFFFF;
			position: relative;
			z-index: 4;
			margin-top: 20rpx;
		}

		.xcq-btn {
			background: #E09913;
		}

		.xcz-btn {
			position: absolute;
			right: 20rpx;
			background: #56A7AD;
			bottom: 20rpx;
		}

		.carmanage-box {
			background: rgba(18, 107, 201, 0.1);
			position: relative;

			.md-icon {
				position: absolute;
				width: 202rpx;
				height: 96rpx;
				right: 32rpx;
			}
		}

		.xcq-box-my {
			.md-icon {
				position: absolute;
				width: 132rpx;
				height: 114rpx;
				right: 56rpx;
			}
		}

		.md-title {
			font-family: PingFang SC, PingFang SC;
			font-weight: 600;
			font-size: 28rpx;
			color: #000000;
		}

		.md-desc {
			margin-top: 8rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 16rpx;
			color: #72778A;
		}

		.md-icon {
			width: 78rpx;
			height: 76rpx;
		}
	}

	.recharge-btn {
		width: 168rpx;
		height: 54rpx;
		background: linear-gradient(138deg, #FBE3C8 0%, #F6D0AE 100%);
		border-radius: 44rpx;
		position: absolute;
		top: 110rpx;
		right: 70rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 600;
		font-size: 24rpx;
		color: #371901;
		z-index: 5;
	}
</style>